<template>
	<view>
		<view class="tui-actionsheet-class tui-actionsheet" :class="[show ? 'tui-actionsheet-show' : '']"
			style="top: 70rpx;">
			<view class="container">
				<view class="body-wrap bh-row bh-justify-space-between">
					<view class="col-wrap bh-flex-1">
						<view class="title">城市</view>
						<view v-for="(item, index) in cityList" :key="index">
							<view @click="changeCity(item)"
								:class="[selectedDto.cityCode == item.code ? 'col-item col-item-ac' : 'col-item']">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="col-wrap bh-flex-1">
						<view class="title">区域</view>
						<view v-for="(item, index) in areaList" :key="index">
							<view @click="changeArea(item)"
								:class="[selectedDto.areaCode == item.code ? 'col-item col-item-ac' : 'col-item']">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="col-wrap bh-flex-1">
						<view class="title">街道</view>
						<view v-for="(item, index) in streetList" :key="index">
							<view @click="changeStreet(item)"
								:class="[selectedDto.street == item.name ? 'col-item col-item-ac' : 'col-item']">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="btn-wrap bh-row bh-justify-space-between" style="margin-bottom: 20rpx;">
					<view @click="reset" class="btn-reset bh-flex-1"
						style="padding-top: 0;flex: unset;margin-left: 32rpx;">重置</view>
					<view @click="confirm" class="btn-confirm bh-flex-1"
						style="padding-top: 0;margin-right: 32rpx;flex: unset;">确定</view>
				</view>
			</view>
		</view>
		<!-- <view class="tui-actionsheet-mask" style="top:100rpx" :class="[show ? 'tui-mask-show' : '']" @tap="closeModel"> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import {
		Api
	} from '../../api/api'

	export default {
		name: "showAreaStreetSheet",
		emits: ['close', 'confirm'],
		props: {
			//显示操作菜单
			show: {
				type: Boolean,
				default: false
			},
			currentDto: {
				type: Object,
				default: {}
			}
		},
		created() {
			Object.assign(this.selectedDto, this.currentDto)
			this.cityList = [{
				name: this.$store.state.currentRegion.city,
				code: this.$store.state.currentRegion.cityCode
			}]
			let that = this
			Api.ConstantApi.areaStreetList(this.selectedDto.cityCode, (res) => {
				if (res.code == 200) {
					that.areaList = res.data
				}
			})
		},
		// mounted(){
		//     let that = this
		//     Api.ConstantApi.areaStreetList(this.selectedDto.cityCode, (res) => {
		//         if (res.code == 200) {
		//             that.areaList = res.data
		//         }
		//     })
		// },
		data() {
			return {
				selectedDto: {

				},
				cityList: [],
				areaList: [],
				streetList: []
			}
		},
		methods: {
			closeModel() {
				this.$emit('close')
			},
			changeCity(cityRegion) {
				if (this.selectedDto.cityCode == cityRegion.code) {
					return
				}
				// 这里目前只是北京市
				this.selectedDto.cityCode = cityRegion.code
				this.selectedDto.city = cityRegion.name

			},
			changeArea(areaRegion) {
				let that = this
				console.log('改变区域信息', areaRegion)
				if (this.selectedDto.areaCode == areaRegion.code) {
					return
				}
				this.selectedDto.areaCode = areaRegion.code
				this.selectedDto.area = areaRegion.name
				this.streetList = []
				for (var i = 0; i < that.areaList.length; i++) {
					if (that.areaList[i].code == that.selectedDto.areaCode) {
						that.streetList = that.areaList[i].subList
					}
				}
			},
			changeStreet(streetRegion) {
				console.log('改变街道信息', streetRegion, this.selectedDto.street)
				if (this.selectedDto.street == streetRegion.name) {
					return
				}
				this.selectedDto.street = streetRegion.name
			},
			reset() {
				this.selectedDto = {}
			},
			confirm() {
				this.$emit('confirm', this.selectedDto)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url(../../static/css/base.css);

	.tui-actionsheet {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		/* top: 0; */
		z-index: 9999;
		visibility: hidden;
		// transform: translate3d(0, -100%, 0);
		// transform-origin: center;
		// transition: all 0.3s ease-in-out;
		background: #eaeaec;
		background: white;
		min-height: 100rpx;

		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;

		// background: #333333;

		// box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.2);
	}

	.tui-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.tui-tips {
		width: 100%;
		padding: 30rpx 60rpx;
		box-sizing: border-box;
		text-align: center;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-operate-box {
		padding-bottom: 12rpx;
	}

	.tui-actionsheet-btn {
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 36rpx;
		position: relative;
	}

	.tui-btn-last {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-actionsheet-divider::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-actionsheet-cancel {
		color: #1a1a1a;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-actionsheet-hover {
		background: #f7f7f9;
	}

	.tui-actionsheet-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: rgba(0, 0, 0, 0.6);
		// background: rgba(0, 0, 0, 0.25);
		// z-index: 9996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}

	.container {
		// top: 546.02px;
		// width: 375px;
		// height: 265.98px;

	}

	.body-wrap {
		margin-top: 28rpx;

		margin-right: 32rpx;
		font-size: 28rpx;
		font-weight: normal;

		.col-wrap {
			height: 872rpx;
			overflow: scroll;
			// border-right: 1px solid rgba(0, 0, 0, 0.12);
			border-right: 1px solid #f5f5f5;
			margin-left: 32rpx;

			.title {
				text-align: left;
				margin-bottom: 32rpx;
			}

			.col-item {
				margin-bottom: 56rpx;
				text-align: left;
				color: #666666;
			}

			.col-item-ac {
				font-weight: 600;
				color: rgba(0, 0, 0, 0.85);
			}
		}
	}

	.btn-wrap {
		// padding-top: 26rpx;
		padding-bottom: 26rpx;
		font-size: 32rpx;
		border-top: 1px solid #eee;
		// border-top: 1px solid rgba(0, 0, 0, 0.12);

		.btn-reset {

			font-weight: normal;

			color: rgba(0, 0, 0, 0.8456);
			text-align: center;
			padding-top: 26rpx;
			padding-bottom: 26rpx;
		}

		.btn-confirm {
			font-weight: 600;
			text-align: center;

			color: rgba(0, 0, 0, 0.85);
			background: #F8D247;
			padding-top: 26rpx;
			padding-bottom: 26rpx;
		}
	}

	.btn-reset {
		width: 165px;
		height: 80rpx;
		border-radius: 100px;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid rgba(0, 0, 0, 0.85);
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		line-height: 60rpx;
		text-align: center;
		letter-spacing: 0px;
		padding-top: 0;
		color: #333333;
	}

	.btn-confirm {
		width: 165px;
		height: 80rpx;
		border-radius: 200rpx;
		opacity: 1;
		background: #F8D247;
		box-sizing: border-box;
		border: 1px solid rgba(0, 0, 0, 0.85);
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		padding-top: 0;
		line-height: 60rpx;
		text-align: center;
		letter-spacing: 0px;
		color: #333333;
	}
</style>